<template>
<div class="relative">
  <div class="font-Inter storeList mt-[16px] s2k:mt-[21.3px] s4k:mt-[32px] px-[24px] s2k:px-[32px] s4k:px-[48px] flex flex-wrap justify-between border-t border-[var(--grid)] border-solid pt-[4px] s2k:pt-[5.3px] s4k:pt-[8px] h-[calc(100vh_-_330px)] s2k:h-[calc(100vh_-_440px)] s4k:h-[calc(100vh_-_660px)] ">
    <div class="w-full mt-[12px] s2k:mt-[16px] s4k:mt-[24px] flex">
      <span class="text-[2rem] text-[var(--theme-font-color)]">{{ typeTitle }}</span>
      <div class="ml-auto w-[54px] h-[37px] s2k:w-[72px] s2k:h-[49.3px] s4k:w-[108px] s4k:h-[74px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[var(--theme-button-bg)] cursor-pointer flex" @click="backVAStore">
        <svg-icon name="controls-left" width="14px" height="14px" class="m-auto svgLogo s2ksvg s4ksvg"></svg-icon>
      </div>
    </div>
    <div class="w-[46.3%] min-h-[150px] s2k:min-h-[200px] s4k:min-h-[300px] bg-[var(--theme)] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] p-[24px] s2k:p-[32px] s4k:p-[48px] flex flx-row justify-start border border-solid border-[var(--grid)] mt-[12px] s2k:mt-[16px] s4k:mt-[24px]" v-for="v in SeeAllList.data" :key="v.title">
      <img :src="v.imgUrl" alt="" class="w-[180px] s2k:w-[240px] s4k:w-[360px] h-[120px] s2k:h-[160px] s4k:h-[240px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px]">
      <div class="w-full ml-[32px] s2k:ml-[42.6px] s4k:ml-[64px]">
        <div class="w-full flex flex-row justify-between items-start">
          <div class="text-[1.66rem] text-[var(--theme-font-color)] flex flex-col justify-start">
            <span>{{v.title}}</span> 
            <span class="text-[#6B7280] text-[1.13rem] mt-[4px] s2k:mt-[5.3px] s4k:mt-[8px]">{{v.subheading}}</span>
          </div>
          <div class="flex flex-row justify-end">
            <div v-if="VAindex == 2" class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
              <svg-icon name="dele" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
            </div>
            <div v-else class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
              <svg-icon name="like" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
            </div>
            <!-- <div class="w-[30px] h-[30px] s2k:w-[40px] s2k:h-[40px] s4k:w-[60px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#F3F4F6] flex mr-[8px] s2k:mr-[10.6px] s4k:mr-[16px] cursor-pointer">
              <svg-icon name="like" class="s2ksvg s4ksvg m-auto" width="16px" height="16px"></svg-icon>
            </div> -->
            <div class="w-[138px] s2k:w-[184px] s4k:w-[276px] h-[30px] s2k:h-[40px] s4k:h-[60px] rounded-[8px] s2k:rounded-[10.6px] s4k:rounded-[16px] bg-[#1A56DB] flex flex-row justify-center items-center cursor-pointer">
              <svg-icon name="buy" class="svgLogo s2ksvg s4ksvg" width="14px" height="14px"></svg-icon>
              <span class="text-white text-[1.13rem] ml-[8px] s2k:ml-[10.6px] s4k:ml-[16px]">Add to cart</span>
            </div>
          </div>
        </div>
        <div class="w-full text-[var(--theme-font-desc-color)] text-[1.13rem] leading-[160%] my-[12px] s2k:my-[16px] s4k:my-[24px]">{{v.desc}}</div>
        <div class="flex flex-row justify-start items-center">
          <div class="relative mr-[30px] s2k:mr-[40px] s4k:mr-[60px]">
            <span class="text-strike text-[2rem] text-[var(--theme-font-color)] font-[600]">1 Credit</span>
          </div>
          <div class="w-[46px] h-[22px] s2k:w-[61.3px] s2k:h-[29.3px] s4k:w-[92px] s4k:h-[44px] rounded-[6px] s2k:rounded-[8px] s4k:rounded-[12px] bg-[#E1EFFE] flex"><span class="m-auto text-[1rem] text-[#1E429F]">Free</span></div>
        </div>
      </div>
    </div>
  </div>
  <div class="w-full h-[64px] absolute bottom-[-70px] s2k:bottom-[-93.33px] s4k:bottom-[-140px] z-10 bg-theme s4k:h-[128px] s2k:h-[85.3px]">
    <Footer></Footer>
  </div>
</div>
  
</template>

<script setup>
import { onMounted ,reactive,ref} from "vue";
import Footer from "./footer.vue";
const props = defineProps({
  VAindex: {
    type: Number,
    default: 1,
  },
  typeTitle: {
    type: String,
    default: 'VA Store',
  },
  SeeAllList: {
    type: Array,
    default: [],
  },
});
onMounted(()=>{
  console.log('SeeAllList',props.SeeAllList)
})
const emit = defineEmits(["hideSeeAll"]);
const backVAStore = () => {
  emit("hideSeeAll");
}
</script>
<style lang="scss" scoped>
.storeList {
  overflow-y: scroll;
  margin-right: 10px;
}

.storeList::-webkit-scrollbar {
  width: 4px;
}

.storeList::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 10px;
}

.storeList::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
  border-radius: 10px;
}
.text-strike::after {
  content: '';
  position: absolute;
  top: 90%;
  left: 0;
  width: 100px;
  height: 2px;
  background-color: #1C64F2;
  transform: rotate(-15deg);
  transform-origin: 0 0;
}
.text-strike2::after {
  content: '';
  position: absolute;
  top: 90%;
  left: 0;
  width: 70px;
  height: 2px;
  background-color: #1C64F2;
  transform: rotate(-15deg);
  transform-origin: 0 0;
}
@media screen and (min-width: 2560px) {
  .s2ksvg {
    transform: scale(1.2);
  }
  .text-strike::after {
    width: 133.33px;
    height: 2.66px;
  }
  .text-strike2::after {
    width: 93.33px;
    height: 2.66px;
  }
}
@media screen and (min-width: 3840px) {
  .s4ksvg {
    transform: scale(1.8) !important;
  }
  .text-strike::after {
    width: 200px;
    height: 4px;
  }
  .text-strike2::after {
    width: 140px;
    height: 4px;
  }
}
</style>
